<div class="panel panel-default">
	<div class="panel-heading">
		<div [hidden]="view === 1">
		{{('channel.manange.heading1' | translate) || '节点信息'}}
		</div>
		<div class="row" *ngIf="view === 1">
		    <div class="col-md-1">
                <label for="file2" class="file-upload">
                    <button class="btn btn-default btn-block" (click)="back()">返回</button>
                </label>			    
		    </div>
	    </div>                
	</div>
	<div class="panel-body">
		<div *ngIf="view === 0">
			<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
			    <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
			    <input #gb type="text" pInputText size="50" placeholder="请输入过滤关键词！">
			</div>		
			<p-dataTable #dt [value]="bandWidthInfo" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]"
				[globalFilter]="gb">
				<p-column header="{{('crm.component.mycust.dt.index' | translate) || '序号'}}" [style]="{'width':'4%','text-align': 'center'}"> 
					<ng-template let-col let-c="rowData" let-ri="rowIndex" pTemplate="body"> <span>{{ri+1}}</span>
					</ng-template>
				</p-column> 			
				<p-column field="nodeName" [editable]="false"
					[style]="{'text-align': 'center'}">
			        <ng-template pTemplate="header">
	          			{{('channel.chnlName111' | translate) || '节点名称'}}
	      			</ng-template>
			       <ng-template let-col let-node="rowData" pTemplate="body">
			            <a (click)="viewDetail(node)"><span class="node-name">{{node[col.field]}}</span></a>
			        </ng-template> 			
				</p-column> 
				<p-column field="bwTx" header="{{('channel.chnlType111' | translate) || '上行带宽'}}" [editable]="false" 
					[style]="{'text-align': 'center'}"></p-column> 
				<p-column field="bwRx" header="{{('channel.manage.dt.contactNam1e' | translate) || '下行带宽'}}" [editable]="false"
					[style]="{'text-align': 'center'}"></p-column>
				<p-column field="bandwidth" header="{{('channel.manage.dt.contact1Phone' | translate) || '总带宽'}}" [editable]="false"
					[style]="{'text-align': 'center'}"></p-column>
			</p-dataTable>
		</div>
		<div>
			<div class="row">
			    <div class="col-md-4">
			        <div class="panel" *ngIf="view === 1">
			            <div class="view-head">{{selectNode ? selectedNode.nodeName: ''}} 节点概览</div>
			            <div class="panel-body">
							<app-userinfo-brand-rank-map [longtitude]="selectedNodePosition.longtitude" [latitude]="selectedNodePosition.latitude"></app-userinfo-brand-rank-map>			                
			            </div>
			        </div>
			    </div>
			    <div  [hidden]="view === 0" class="col-md-8">
			        <div class="panel">
			        	<div class="view-head">
			        		<div class="row">
			    				<div class="col-md-1"></div>
			    				<div class="col-md-6">
			    					<span>节点带宽占用概览</span>
			    				</div>
			    				<div class="col-md-4" [style]="{'height':'20px','line-height':'20px'}">
			    					<ng-select [items]="dates" [(ngModel)]="selectedDate" (selected)="getNodeBandWidthUsed()"> </ng-select>
			    				</div>
			    				<div class="col-md-1"></div>
			    			</div>
			        		
			        	    	
			        	</div>
			            <div>
			                <echarts-ng2 #bandWidthChart [style]="{'width': '100%', 'height': '260px', 'display': 'inline-block'}"></echarts-ng2>
			            </div>
			        </div>
			    </div>
			</div>
			<div class="row" [hidden]="view === 0">
			    <div class="col-md-12">
			        <div class="panel">
			            <div class="view-head">
			            	<div class="row">
			    				<div class="col-md-1"></div>
			    				<div class="col-md-7">
			    					<span>应用流量排名</span>
			    				</div>
			    				<div class="col-md-3" [style]="{'height':'20px','line-height':'20px'}">
			    					<ng-select [items]="dates" [(ngModel)]="usedSelectedDate" (selected)="getAppData()"> </ng-select>
			    				</div>
			    				<div class="col-md-1"></div>
			    			</div>
			            </div>
			        </div>
			    </div>
		    </div>
			<div class="row" [hidden]="view === 0">
			    <div class="col-md-4">
			        <div>
			        	<echarts-ng2 #bandWidthChartUsed [style]="{'width': '100%', 'height': '260px', 'display': 'inline-block'}"></echarts-ng2>
			        </div>
		        </div>
			    <div class="col-md-8">
			        <div>
						<p-dataTable #appdt [value]="appData" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
							<p-column header="{{('crm.component.mycust.dt.index' | translate) || '序号'}}" [style]="{'width':'4%','text-align': 'center'}"> 
								<ng-template let-col let-c="rowData" let-ri="rowIndex" pTemplate="body"> <span>{{ri+1}}</span>
								</ng-template>
							</p-column> 			
							<p-column field="appName" [editable]="false"
								[style]="{'text-align': 'center'}">
						        <ng-template pTemplate="header">
				          			{{('channel.chnlName111' | translate) || '应用名称'}}
				      			</ng-template>
						       <ng-template let-col let-node="rowData" pTemplate="body">
						            <a [style.color]="Blue" (click)="viewDetail(node)"><span [style.color]='Blue'>{{node[col.field]}}</span></a>
						        </ng-template> 			
							</p-column> 
							<p-column field="bwTx" header="{{('channel.chnlType111' | translate) || '上行带宽 (bps)'}}" [editable]="false" 
								[style]="{'text-align': 'center'}"></p-column> 
							<p-column field="bwRx" header="{{('channel.manage.dt.contactNam1e' | translate) || '下行带宽 (bps)'}}" [editable]="false"
								[style]="{'text-align': 'center'}"></p-column>
							<p-column field="bandwidth" header="{{('channel.manage.dt.contact1Phone' | translate) || '总带宽 (bps)'}}" [editable]="false"
								[style]="{'text-align': 'center'}"></p-column>
						</p-dataTable>
			        </div>
		        </div>		        
	        </div>			
		</div>
	</div>
</div>